<template>
  <div class="flex-1 overflow-hidden d-flex">
    <div class="left-tab d-flex-c">
      <div
        :class="['left-tab-item d-flex-c ai-c jc-c c-pointer f-14', currentLeftTab === key ? 'active' : '']"
        v-for="(item, key) in leftTabs"
        :key="key"
        @click="clickLeftTab(key)"
      >
        <span class="text">{{ item }}</span>
        <span>{{ currentCount[key] }}/{{ leftTabsCount[key] }}</span>
      </div>
    </div>
    <Transfer
      :titles="['河流列表', '已选河流']"
      @change="(data) => currentChange(data, '0')"
      class="main-area"
      v-show="currentLeftTab === '0'"
      meta-set="ATT_RV_BASE"
      method-code="get_rvList"
      main-id-key="RV_CODE"
      :columns="columns['0']"
      @rowClick="(data) => fit(data, '0')"
      ref="transfer0"
      layer-id="gc-0"
      v-on="$listeners"
      :city-data="cityData"
      v-model="city"
    />
    <Transfer
      :titles="['湖泊列表', '已选湖泊']"
      @change="(data) => currentChange(data, '1')"
      class="main-area"
      v-show="currentLeftTab === '1'"
      meta-set="ATT_LK_BASE"
      method-code="get_lkList"
      main-id-key="LK_CODE"
      :columns="columns['1']"
      @rowClick="(data) => fit(data, '1')"
      ref="transfer1"
      layer-id="gc-1"
      v-on="$listeners"
      :city-data="cityData"
      v-model="city"
    />
    <Transfer
      :titles="['水库列表', '已选水库']"
      @change="(data) => currentChange(data, '2')"
      class="main-area"
      v-show="currentLeftTab === '2'"
      meta-set="ATT_RES_BASE"
      method-code="get_resList"
      main-id-key="RES_CODE"
      :columns="columns['2']"
      @rowClick="(data) => fit(data, '2')"
      ref="transfer2"
      layer-id="gc-2"
      v-on="$listeners"
      :city-data="cityData"
      v-model="city"
    />
    <Transfer
      :titles="['水闸列表', '已选水闸']"
      @change="(data) => currentChange(data, '3')"
      class="main-area"
      v-show="currentLeftTab === '3'"
      meta-set="ATT_WAGA_BASE"
      method-code="get_wagaList"
      main-id-key="WAGA_CODE"
      :columns="columns['3']"
      @rowClick="(data) => fit(data, '3')"
      ref="transfer3"
      layer-id="gc-3"
      v-on="$listeners"
      :city-data="cityData"
      v-model="city"
    />
    <Transfer
      :titles="['泵站列表', '已选泵站']"
      @change="(data) => currentChange(data, '4')"
      class="main-area"
      v-show="currentLeftTab === '4'"
      meta-set="ATT_PUST_BASE"
      method-code="get_pustList"
      main-id-key="PUST_CODE"
      :columns="columns['4']"
      @rowClick="(data) => fit(data, '4')"
      ref="transfer4"
      layer-id="gc-4"
      v-on="$listeners"
      :city-data="cityData"
      v-model="city"
    />
    <Transfer
      :titles="['蓄滞洪区列表', '已选蓄滞洪区']"
      @change="(data) => currentChange(data, '5')"
      class="main-area"
      v-show="currentLeftTab === '5'"
      meta-set="ATT_FSDA_BASE"
      method-code="get_fsdaList"
      main-id-key="FSDA_CODE"
      :columns="columns['5']"
      @rowClick="(data) => fit(data, '5')"
      ref="transfer5"
      layer-id="gc-5"
      v-on="$listeners"
      :city-data="cityData"
      v-model="city"
    />
    <Transfer
      :titles="['堤防列表', '已选堤防']"
      @change="(data) => currentChange(data, '6')"
      class="main-area"
      v-show="currentLeftTab === '6'"
      meta-set="OBJ_DIKE"
      method-code="get_dikeList"
      main-id-key="DIKE_CODE"
      :columns="columns['6']"
      @rowClick="(data) => fit(data, '6')"
      ref="transfer6"
      layer-id="gc-6"
      v-on="$listeners"
      :city-data="cityData"
      v-model="city"
    />
    <Transfer
      :titles="['行洪河道列表', '已选行洪河道']"
      @change="(data) => currentChange(data, '7')"
      class="main-area"
      v-show="currentLeftTab === '7'"
      meta-set="OBJ_XHRV"
      method-code="get_xhrvList"
      main-id-key="XHRV_CODE"
      :columns="columns['7']"
      @rowClick="(data) => fit(data, '7')"
      ref="transfer7"
      layer-id="gc-7"
      v-on="$listeners"
      :city-data="cityData"
      v-model="city"
    />
    <Transfer
      :titles="['橡胶坝列表', '已选橡胶坝']"
      @change="(data) => currentChange(data, '8')"
      class="main-area"
      v-show="currentLeftTab === '8'"
      meta-set="OBJ_RUDA"
      method-code="get_rudaList"
      main-id-key="RUDA_CODE"
      :columns="columns['8']"
      @rowClick="(data) => fit(data, '8')"
      ref="transfer8"
      layer-id="gc-8"
      v-on="$listeners"
      :city-data="cityData"
      v-model="city"
    />
    <Transfer
      :titles="['枢纽列表', '已选枢纽']"
      @change="(data) => currentChange(data, '9')"
      class="main-area"
      v-show="currentLeftTab === '9'"
      meta-set="ATT_PIVOT_BASE"
      method-code="get_pivotList"
      main-id-key="PIVOT_CODE"
      :columns="columns['9']"
      @rowClick="(data) => fit(data, '9')"
      ref="transfer9"
      layer-id="gc-9"
      v-on="$listeners"
      :city-data="cityData"
      v-model="city"
    />
  </div>
</template>

<script>
import Transfer from './transfer.vue'
import { mapState } from 'vuex'
export default {
  name: 'Project',
  components: {
    Transfer
  },
  data () {
    return {
      city: [],
      cityData: [],
      leftTabs: {
        0: '河流',
        1: '湖泊',
        2: '水库',
        3: '水闸',
        4: '泵站',
        5: '蓄滞洪区',
        6: '堤防',
        7: '行洪河道',
        8: '橡胶坝',
        9: '枢纽'
      },
      leftTabsCount: {
        0: 0,
        1: 0,
        2: 0,
        3: 0,
        4: 0,
        5: 0,
        6: 0,
        7: 0,
        8: 0,
        9: 0
      },
      currentCount: {
        0: 0,
        1: 0,
        2: 0,
        3: 0,
        4: 0,
        5: 0,
        6: 0,
        7: 0,
        8: 0,
        9: 0
      },
      currentLeftTab: '0',
      columns: {
        0: [{ title: '河流名称', field: 'RV_NAME' }, { title: '起点', field: 'QSXZQMC', width: 65 }, { title: '终点', field: 'ZZXZQMC', width: 65 }],
        1: [{ title: '湖泊名称', field: 'LK_NAME' }],
        2: [{ title: '水库名称', field: 'RES_NAME' }, { title: '站码', field: 'STCD', width: 80 }, { title: '行政区', field: 'XZQMC', width: 65 }],
        3: [{ title: '水闸名称', field: 'WAGA_NAME' }],
        4: [{ title: '泵站名称', field: 'PUST_NAME' }],
        5: [{ title: '蓄滞洪区名称', field: 'FSDA_NAME' }],
        6: [{ title: '堤防名称', field: 'DIKE_NAME' }],
        7: [{ title: '行洪河道名称', field: 'XHRV_NAME' }, { title: '起点', field: 'QSXZQMC', width: 65 }, { title: '终点', field: 'ZZXZQMC', width: 65 }],
        8: [{ title: '橡胶坝名称', field: 'RUDA_NAME' }],
        9: [{ title: '枢纽名称', field: 'PIVOT_NAME' }]
      },
      idMap: {
        0: 'RV_CODE',
        1: 'LK_CODE',
        2: 'RES_CODE',
        3: 'WAGA_CODE',
        4: 'PUST_CODE',
        5: 'FSDA_CODE',
        6: 'DIKE_CODE',
        7: 'XHRV_CODE',
        8: 'RUDA_CODE',
        9: 'PIVOT_CODE'
      }
    }
  },
  created () {
    this.initCityData()
    this.getStationCount()
    this.$root.$on('updateMapMaking', this.updateMapMaking)
    this.$root.$on('removeCurrentRow', this.removeCurrentRow)
  },
  beforeDestroy () {
    this.$root.$off('updateMapMaking', this.updateMapMaking)
    this.$root.$off('removeCurrentRow', this.removeCurrentRow)
  },
  computed: {
    ...mapState('map-making', ['projectLayer'])
  },
  methods: {
    async updateMapMaking () {
      // const tableMap = {
      //   0: 'att_rv_base',
      //   1: 'att_lk_base',
      //   2: 'att_res_base',
      //   3: 'att_waga_base',
      //   4: 'att_pust_base',
      //   5: 'att_fsda_base',
      //   6: 'obj_dike',
      //   7: 'obj_xhrv',
      //   8: 'obj_ruda',
      //   9: 'att_pivot_base'
      // }
      // const idMap = {
      //   0: 'RV_CODE',
      //   1: 'LK_CODE',
      //   2: 'RES_CODE',
      //   3: 'WAGA_CODE',
      //   4: 'PUST_CODE',
      //   5: 'FSDA_CODE',
      //   6: 'DIKE_CODE',
      //   7: 'XHRV_CODE',
      //   8: 'RUDA_CODE',
      //   9: 'PIVOT_CODE'
      // }
      for (const key in this.projectLayer) {
        if (Object.hasOwnProperty.call(this.projectLayer, key)) {
          const element = this.projectLayer[key]
          // const data = await this.$request.post('/ysjc/ztt/getZttSlgc', {
          //   TABLE: tableMap[key],
          //   CODE: element.map(item => item[idMap[key]]).join(',')
          // })
          // const codes = element.filter(item => item.id)
          this.$refs['transfer' + key].setTableData(element)
        }
      }
    },
    async initCityData () {
      const data = await this.$utils.dictionary.getOptionsByKey('YSQJC_JC_XZQ')
      function hander (id) {
        const arr = data.filter(item => item.fcode === id)
        if (!arr.length) return null
        return arr.map(item => ({
          label: item.label,
          value: item.value,
          children: hander(item.value)
        }))
      }
      this.cityData = hander('130000')
    },
    async getStationCount () {
      const data = await this.$request.post('/ysjc/ztt/slgcCount', {})
      if (data) {
        this.leftTabsCount['0'] = data.rvnum
        this.leftTabsCount['1'] = data.lknum
        this.leftTabsCount['2'] = data.resnum
        this.leftTabsCount['3'] = data.waganum
        this.leftTabsCount['4'] = data.pustnum
        this.leftTabsCount['5'] = data.fsdanum
        this.leftTabsCount['6'] = data.dikenum
        this.leftTabsCount['7'] = data.xhrvnum
        this.leftTabsCount['8'] = data.rudanum
        this.leftTabsCount['9'] = data.pivotnum
      }
    },
    clickLeftTab (key) {
      this.currentLeftTab = key
      this.$nextTick(() => {
        this.$refs['transfer' + key].search()
      })
    },
    async currentChange (data, key) {
      console.log(data, key)
      if (['3', '6', '7', '8'].includes(key)) {
        // 请求空间表的数据
        let params = null
        if (key === '3') {
          params = {
            url: '/grid/getTableData',
            metaSet: 'OBJ_WAGA',
            methodCode: 'get_waga_KjdxList',
            methodParams: {
              CODE: data.map(item => item.WAGA_CODE).join(',')
            }
          }
        } else if (key === '6') {
          params = {
            url: '/grid/getTableData',
            metaSet: 'OBJ_DIKE',
            methodCode: 'get_dikeKjdxList',
            methodParams: {
              CODE: data.map(item => item.DIKE_CODE).join(',')
            }
          }
        } else if (key === '7') {
          params = {
            url: '/grid/getTableData',
            metaSet: 'OBJ_XHRV',
            methodCode: 'get_xhrvKjdxList',
            methodParams: {
              CODE: data.map(item => item.XHRV_CODE).join(',')
            }
          }
        } else if (key === '8') {
          params = {
            url: '/grid/getTableData',
            metaSet: 'OBJ_RUDA',
            methodCode: 'get_rudaKjdxList',
            methodParams: {
              CODE: data.map(item => item.RUDA_CODE).join(',')
            }
          }
        }
        if (params.methodParams.CODE) {
          const { rows } = await this.$request.singleTableOperation(params)
          this.$emit('updateMapFeatures', {
            layerId: 'gc-' + key,
            rows: rows.map((item, index) => ({
              id: item[this.idMap[key]] + `-${index}`,
              kjdx: item.KJDX,
              text: item[this.idMap[key].split('_')[0] + '_NAME']
            })),
            layerName: this.leftTabs[key]
          })
        } else {
          this.$emit('updateMapFeatures', {
            layerId: 'gc-' + key,
            rows: [],
            layerName: this.leftTabs[key]
          })
        }
      } else {
        let kjdxList = []
        if (data[0] && !data[0].KJDX) {
          const tableMap = {
            0: 'att_rv_base',
            1: 'att_lk_base',
            2: 'att_res_base',
            3: 'att_waga_base',
            4: 'att_pust_base',
            5: 'att_fsda_base',
            6: 'obj_dike',
            7: 'obj_xhrv',
            8: 'obj_ruda',
            9: 'att_pivot_base'
          }
          const { SLGCKJDXS } = await this.$request.post('/ysjc/ztt/getZttSlgc', {
            TABLE: tableMap[key],
            CODE: data.map(item => item[this.idMap[key]]).join(',')
          })
          kjdxList = SLGCKJDXS
        }
        this.$emit('updateMapFeatures', {
          layerId: 'gc-' + key,
          rows: data.map(item => ({
            id: item[this.idMap[key]],
            kjdx: item.KJDX ?? kjdxList.find(k => k[this.idMap[key].toLowerCase()] === item[this.idMap[key]])?.kjdx,
            text: item[this.idMap[key].split('_')[0] + '_NAME']
          })),
          layerName: this.leftTabs[key]
        })
      }
      this.currentCount[key] = data.length
      this.$store.commit('map-making/setProjectLayer', Object.assign(this.projectLayer, { [key]: data.map(item => ({ ...item, KJDX: null })) }))
    },
    fit (row, key) {
      if (['3', '6', '7', '8'].includes(key)) {
        this.$emit('fit', row[this.idMap[key]] + '-0', 'gc-' + key)
      } else {
        this.$emit('fit', row[this.idMap[key]], 'gc-' + key)
      }
    },
    removeCurrentRow ({ id, layerId }) {
      if (layerId.startsWith('station-')) return
      const key = layerId.split('-')[1]
      this.$refs['transfer' + key].removeRowById(id)
    }
  }
}
</script>

<style lang="scss" scoped>
.left-tab {
  width: 104px;
  background: linear-gradient(0deg, #fff 0%, #f3f6f9 100%);
  border-right: 1px solid #e1e9f0;
  align-items: flex-end;
  padding-top: 17px;

  .left-tab-item {
    width: 92px;
    height: 60px;
    color: #6a6b7f;
    position: relative;

    &.active {
      background: #fff;
      border: 1px solid #e2eaf1;
      border-right: none;
      border-radius: 8px 0 0 8px;
      margin-right: -1px;

      &::before {
        content: "";
        width: 6px;
        height: 60px;
        background: linear-gradient(90deg, #0080ff 0%, #fff 100%);
        border-radius: 6px 0 0 6px;
        display: inline-block;
        position: absolute;
        left: 0;
        top: 0;
      }
    }

    &:hover {
      > .text {
        color: #333;
      }
    }
  }
}

.main-area {
  padding: 0 16px;
}
</style>
